<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑菜品</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
    <script src="${base}/backstage/js/feng.js?t=1"></script>
    <script src="${base}/backstage/js/loading.js?t=1"></script>
</head>
<body>

<br>
<form class="layui-form " action="" style="padding-left: 15px;">
    <input type="hidden" value="${commodity.id}" id="id"/>

    <br>
    <div class="layui-upload-drag" id="test10"  style="position: relative;left:7%">
        <div  id="uploadDemoView">
            <img src="${commodity.commodityUrl}" style="width: 342px;height: 136px">
        </div>
        <i class="layui-icon"></i>
        <p>点击上传上商品主图，或将文件拖拽到此处</p>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input class="layui-input" value="${commodity.commodityName}" name="commodityName" id="commodityName" placeholder="请输入商品名称" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜品分类</label>
        <div class="layui-input-block">
            <select name="classification" id="classification" lay-verify="required" lay-search="">
                <option value="">请选择菜品分类</option>
                <#list varietyClassification as varietyClassification>
                    <option value="${varietyClassification.id}">${varietyClassification.varietyName}</option>
                </#list>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择规格</label>
        <div class="layui-input-block">
            <select name="commoditySpecifications" id="commoditySpecifications" lay-verify="required" lay-search="">
                <option value="">请选择商品规格</option>
                <option value="2">份量</option>
                <option value="1">杯量</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择类型</label>
        <div class="layui-input-block">
            <select name="type" id="type" lay-verify="required" lay-search="">
                <option value="">请选择商品类型</option>
                <option value="1">大</option>
                <option value="2">中</option>
                <option value="3">小</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单价</label>
        <div class="layui-input-block">
            <input class="layui-input" name="price" value="${commodity.price}" id="price" placeholder="请输入单价" autocomplete="off">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">属性分类</label>
        <div class="layui-input-block">
            <select name="attributeClassificationId" lay-filter="attributeClassificationId" id="attributeClassificationId" lay-verify="required" lay-search="">
                <option value="">请选择属性分类</option>
                <#list attributeClassification as attributeClassification>
                    <option value="${attributeClassification.id},${attributeClassification.attributeClassification}">${attributeClassification.attributeClassification}</option>
                </#list>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">属性</label>
        <div class="layui-input-block">
            <select name="attributeId" id="attributeId" lay-verify="required" lay-search="">

            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">是否上架</label>
        <div class="layui-input-block">
            <select name="onTheShelf" id="onTheShelf" lay-verify="required" lay-search="">
                <option value="">请选择是否上架</option>
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block">
                <textarea class="layui-input" style="height: 90px;" name="commodityDescribe" id="commodityDescribe"
                          autocomplete="off">${commodity.commodityDescribe}</textarea>
        </div>
    </div>




    <div align="center">
        <button type="button" class="layui-btn" id="saveButton">保存</button>
        <button type="button" class="layui-btn" onclick="window.history.back(-1);">返回</button>
    </div>
    <br>
    <br>
</form>
<script>

    var param = "";
    layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;



        form.on('select(attributeClassificationId)', function(data) {
            var a = data.value.split(",");
            var attributeClassificationId = "";
            for (let i = 0; i < a.length-1; i++) {
                attributeClassificationId+=a[0];
            }
            $.ajax({
                type: "get",
                url: "${base}/publicClass/selectByAttributeClassificationId",
                data: {attributeClassificationId:attributeClassificationId},
                success: function (data) {
                    if (data.code === 200) {
                        $("#attributeId").html("")
                        $("#attributeId").append(
                            '<option value="">请选择属性</option>'
                        )
                        for (let i = 0; i < data.data.length; i++) {
                            $("#attributeId").append(
                                '<option value="'+data.data[i].id+","+data.data[i].attribute+'">'+data.data[i].attribute+'</option>'
                            )
                        }
                    }
                    form.render(); //更新全部
                }
            });

        })
        

        //拖拽上传
        upload.render({
            elem: '#test10'
            ,url: '${base}/file/uploadFile' //改成您自己的上传接口
            , before: function (obj) {
                layer.load(); //上传loading
            }
            ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                layer.msg('上传成功');
                // layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                $("#uploadDemoView").html("")
                $('#uploadDemoView').append('<div><img src="' + res.data + '" style="width: 342px;height: 136px"></div>'); //图片链接（base64）
                $("#test10 i").remove()
                $("#test10 p").remove()
                param += res.data;
            }
        });

        //回显属性分类
        $.ajax({
            type: "GET",
            url: "${base}/publicClass/selectAttributeClassificationId",
            data: {id:$("#id").val()},
            success: function (data) {
                if (data.code === 200) {
                    //属性分类 attributeClassificationId attributeClassification
                    $("#attributeClassificationId option[value='" + data.data.id+","+data.data.attributeClassification + "']").attr("selected", "selected");
                    abc()
                    form.render(); //更新全部
                }
            }
        });

        //回显数据
        $.ajax({
            type: "GET",
            url: "${base}/publicClass/selectById",
            data: {id:$("#id").val()},
            success: function (data) {
                if (data.code === 200) {
                    //菜品
                    $("#classification option[value='" + data.data.classification + "']").attr("selected", "selected");
                    //规格 commoditySpecifications
                    $("#commoditySpecifications option[value='" + data.data.commoditySpecifications + "']").attr("selected", "selected");
                    //类型 type
                    $("#type option[value='" + data.data.type + "']").attr("selected", "selected");
                    //属性分类 attributeClassificationId attributeClassification
                    $("#attributeClassificationId option[value='" + data.data.attributeClassificationId+","+data.data.attributeClassification + "']").attr("selected", "selected");
                    //属性 attributeId
                    $("#attributeId option[value='" + data.data.attributeId + "']").attr("selected", "selected");
                    //是否上架 onTheShelf
                    $("#onTheShelf option[value='" + data.data.onTheShelf + "']").attr("selected", "selected");
                    form.render(); //更新全部
                }
            }
        });




    })

    function abc(){
        //根据回显的属性分类查询属性
        var a = $("#attributeClassificationId").val().split(",");
        var attributeClassificationId = "";
        for (let i = 0; i < a.length-1; i++) {
            attributeClassificationId+=a[0];
        }
        $.ajax({
            type: "get",
            url: "${base}/publicClass/selectByAttributeClassificationId",
            data: {attributeClassificationId:attributeClassificationId},
            success: function (data) {
                if (data.code === 200) {
                    $("#attributeId").html("")
                    $("#attributeId").append(
                        '<option value="">请选择属性</option>'
                    )
                    for (let i = 0; i < data.data.length; i++) {
                        $("#attributeId").append(
                            '<option value="'+data.data[i].id+","+data.data[i].attribute+'">'+data.data[i].attribute+'</option>'
                        )
                    }
                }
                layui.form.render(); //更新全部
            }
        });
        //回显属性名称
        $.ajax({
            type: "GET",
            url: "${base}/publicClass/selectAttribute",
            data: {id:'${commodity.attributeId}'},
            success: function (data) {
                //属性 attributeId
                $("#attributeId option[value='" + data.id+","+data.attribute + "']").attr("selected", "selected");
                layui.form.render(); //更新全部
            }
        });
    }



    $("#saveButton").on("click", function () {


        if($("#commodityName").val()==""){
            layer.msg("商品名称不能为空")
            return
        }
        if($("#classification").val()==""){
            layer.msg("菜品分类不能为空")
            return
        }

        if($("#price").val()==""){
            layer.msg("单价不能为空")
            return
        }

        if($("#commoditySpecifications").val()==""){
            layer.msg("选择规格不能为空")
            return
        }
        if($("#type").val()==""){
            layer.msg("类型不能为空")
            return
        }
        if($("#onTheShelf").val()==""){
            layer.msg("是否上架不能为空")
            return
        }
        if($("#attributeClassificationId").val()==""){
            layer.msg("属性分类不能为空")
            return
        }
        if($("#attributeId").val()==""){
            layer.msg("属性不能为空")
            return
        }

        var commodityUrl = "";
        if(param != ""){
            commodityUrl= param;
        }else{
            commodityUrl='${commodity.commodityUrl}';
        }

        var a = $("#attributeClassificationId").val().split(",")
        var attributeClassificationId = "";
        var attributeClassificationName = "";
        for (let i = 0; i < a.length-1; i++) {
            attributeClassificationId+=a[0]
            attributeClassificationName+=a[1]
        }
        var a = $("#attributeId").val().split(",")
        var attributeId = "";
        var attributeName = "";
        for (let i = 0; i < a.length-1; i++) {
            attributeId+=a[0]
            attributeName+=a[1]
        }

        var formDate = {
            commodityName: $("#commodityName").val(),
            classification: $("#classification").val(),
            price: $("#price").val(),
            commoditySpecifications: $("#commoditySpecifications").val(),
            type: $("#type").val(),
            onTheShelf: $("#onTheShelf").val(),
            attributeClassificationId: attributeClassificationId,
            attributeId: attributeId,
            commodityUrl: commodityUrl,
            id:$("#id").val()
         }

        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: "${base}/commodity/updateById",
            data: JSON.stringify(formDate),
            beforeSend: function () {
                loading("数据提交中，请稍后......");
            },
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.msg)
                    window.location.href = "${base}/commodity/commodity.html"
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    })
</script>

</body>
</html>